<!-- 重点客户 -->
<template>
  <div class="client_page" v-show="!list.length==0">
    <div class="main_label">重点客户</div>
    <Row class="label_warp" v-show="isEdit">
      <Col span="24" class="tips">
      <Icon type="md-alert" class="tips_icon" />
      <div>以下为今日到访且您已批注的客户，您可点击右侧“调整展示客户”按钮，对日报中展示的客户进行调整</div>
      </Col>
    </Row>
    <div v-show="list.length>0" class="client_content clearfix">
      <div class="item" v-for="(item,index) in list" :key="index">
        <div class="name_phone">
          <span class="name">{{item.customerName}}</span>
          <span>{{item.customerPhone}}</span>
        </div>
        <div class="item_tag">
          <div class="item_consultant tag">{{item.userName}}</div>
          <div class="tag" v-if="item.intentionLevelName">{{item.intentionLevelName}}</div>
          <div class="tag" v-if="item.statusName">{{item.statusName}}</div>
          <div class="tag" v-if="item.channelName">{{item.channelName}}</div>
        </div>
        <div class="time_text">
          <span class="time">
            {{item.lastFollowUpTime?item.lastFollowUpTime:item.createTime?item.createTime:'-'}}：
          </span>
          <span class="text">
            {{item.lastFollowUp?item.lastFollowUp:item.customerFeature?item.customerFeature:'-'}}
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import dailyApi from '@/biz/buildingHome/daily'
  import moment from 'moment'

  export default {
    props: ['isEdit'],
    data() {
      return {
        list: [],
        info: {}
      }
    },
    methods: {
      show(data) {
        this.info = data
        this.getData()
      },
      getData() {
        console.log(this.$parent.currentDate, '获取重点客户')
        let params = {
          buildingId: this.$dt.buildInfo().housesId,
          startDate: this.$parent.currentDate,
          page: 1,
          rows: 10
        }
        dailyApi.configCustomerList(params).then(res => {
          res.list && res.list.forEach(item => {
            item.createTime = item.createTime ? moment(item.createTime).format(
              'MM-DD') : ''
            item.lastFollowUpTime = item.lastFollowUpTime ? moment(item
              .lastFollowUpTime).format('MM-DD') : ''
          })
          if (res.list.length > 5) {
            this.list = res.list.slice(0, 5)
          } else {
            this.list = res.list
          }
        })
      }
    }
  }
</script>
<style lang='scss' scoped>
  .client_page {
    width: 100%;

    .main_label {
      line-height: 20px;
      border-left: 5px solid #2b85e4;
      padding-left: 8px;
      font-size: 15px;
      margin-bottom: 15px;
    }

    .label_warp {
      margin-bottom: 15px;
      background-color: rgba(254, 252, 236, 1);
      width: auto;
      line-height: 32px;
      padding: 10px;

      .tips {
        line-height: 20px;
        font-size: 14px;
        display: flex;

        .tips_icon {
          font-size: 20px;
          color: #0f42a7;
          vertical-align: sub;
        }
      }
    }

    .client_content {
      border: 1px solid #ccc;
      padding: 15px;
      border-radius: 5px;

      .item {
        padding: 10px 0;
        border-bottom: 1px solid #ccc;

        .name_phone {
          font-size: 16px;
          line-height: 20px;

          .name {
            margin-right: 10px;
          }
        }

        .item_tag {
          display: flex;
          margin-top: 7px;

          .tag {
            margin-right: 10px;
            border: 1px solid #ccc;
            border-radius: 6px;
            padding: 3px 10px;
            font-size: 12px;
            color: #999999;
          }

          .item_consultant {
            background-color: #0f42a7;
            color: #fff;
          }
        }

        .time_text {
          font-size: 13px;
          color: #999999;
          margin-top: 8px;
          display: flex;

          .time {
            color: #2b85e4;
          }

          .text {
            flex: 1;
            word-break: break-all; //在恰当的断字点进行换行 
            overflow: hidden; //文字超出的进行隐藏
            text-overflow: ellipsis; //超出的文字用省略号表示
            display: -webkit-box; //将元素设为盒子伸缩模型显示
            text-overflow: ellipsis; //利用盒子模型 
            -webkit-box-orient: vertical; //伸缩方向设为垂直方向
            -webkit-line-clamp: 2; //设定一共5行，超出的部分隐藏，并用省略号来表示
          }
        }
      }

    }
  }
</style>